<template>
  <div class="shoppingcart">
    <!-- 底部栏 -->
    <div class="content" @click="toggleList">
      <div class="content-left">
        <div class="cartWrap"><img src="~assets/img/箱子.png" alt="" /></div>
        <div class="allPrice">￥{{ AllPrice }}</div>
        <div class="peisong">免配送费|另需配送费</div>
      </div>
      <div class="content-right" :style="styleObject">
        <span>{{ text }}</span>
      </div>
    </div>
    <!-- 抛物线小球 -->

    <!-- 点击购物车弹出选中商品列表 -->
    <transition name="cList">
      <div class="cartlist" v-show="showlist">
        <div class="cartlist-header">
          <h3>购物车</h3>
          <span @click="empty">清空</span>
        </div>
        <div class="cartlist-content" ref="cartlistContent">
          <ul>
            <li class="fooditem" v-for="item in selectFoods">
              <img src="~assets/img/鱼.jpg" alt="" />
              <div class="goodsName">{{ item.name }}</div>
              <div class="goodsnum">x{{ item.count }}</div>
              <div class="foodsPrice">￥10</div>
              <!-- <div>{{selectFoods[0].count}}</div> -->
              <incordec class="goodsCount"></incordec>
            </li>
          </ul>
        </div>
      </div>
    </transition>

    <!-- 遮罩 -->
    <div class="bgcart" v-show="showlist" @click="toggleList"></div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import incordec from "components/cartcontrol/Incordec.vue";
export default {
  name: "shoppingcart",
  components: {
    incordec,
  },
  data() {
    return {
      // 是否显示
      fold: true,
      showlist: false,
    };
  },
  props: {
    selectFoods: {
      type: Array,
    },
  },
  computed: {
    AllPrice: function () {
      if (this.selectFoods.length == 0) {
        return 0;
      } else {
        let price = 0;
        this.selectFoods.forEach((item) => {
          price = Number(item.count * 10) + price;
        });
        return price;
      }
    },
    text: function () {
      if (this.AllPrice > 15) {
        return "去结算";
      }
      return "￥15起送";
    },
    styleObject: function () {
      return this.AllPrice > 15
        ? { "background-color": "#009ae2" }
        : { "background-color": "grey" };
    },
  },
  methods: {
    toggleList() {
      if (this.showlist == false && this.selectFoods.length == 0) {
        this.showlist = this.showlist;
      } else {
        this.showlist = !this.showlist;
      }
    },
    empty() {
      this.selectFoods = [];
      this.showlist = !this.showlist;
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.cartlistContent, {
          click: true,
        });
      } else {
        this.scroll.refresh();
      }
    });
  },
};
</script>

<style scoped>
.shoppingcart {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 46px;
  z-index: 99;
  font-size: 12px;
}
.content {
  background-color: rgb(250, 250, 250);
  position: relative;
}

.content .content-left .cartWrap img {
  width: 46px;
  height: 46px;
}
.content .content-left .allPrice {
  position: absolute;
  font-size: 15px;
  top: 7px;
  left: 46px;
  color: rgb(51, 51, 51);
}
.content .content-left .peisong {
  position: absolute;
  top: 25px;
  left: 46px;
  color: grey;
}
.content .content-right {
  position: absolute;
  top: 7px;
  right: 10px;
  width: fit-content;
  padding: 5px 10px;
  height: 23px;
  color: white;
  /* background-color: #009ae2; */
  border-radius: 17px;
}
.content .content-right span {
  line-height: 23px;
}
.cartlist {
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 46px;
  width: 100%;
}
.cartlist .cartlist-header {
  background-color: rgb(250, 250, 250);
  position: relative;
}
.cartlist .cartlist-header h3 {
  display: inline-block;
  margin: 10px;
  font-size: 14px;
}
.cartlist .cartlist-header span {
  position: absolute;
  top: 10px;
  right: 10px;
  color: gray;
}
.cartlist .cartlist-content {
  background-color: rgb(250, 250, 250);
  max-height: 224.5px;
  overflow: auto;
  
}
.cartlist .cartlist-content .fooditem {
  padding: 10px;
  position: relative;
}
.cartlist .cartlist-content .fooditem img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
}
.cartlist .cartlist-content .fooditem .goodsName {
  font-size: 14px;
  position: absolute;
  top: 10px;
  left: 75px;
  color: #3a3a3a;
}
.cartlist .cartlist-content .fooditem .goodsnum {
  font-size: 14px;
  position: absolute;
  top: 30px;
  right: 20px;
  color: #646464;
}
.cartlist .cartlist-content .fooditem .foodsPrice {
  position: absolute;
  bottom: 10px;
  left: 75px;
  font-size: 14px;
  color: #dd3712;
}
.cartlist .cartlist-content .fooditem .goodsCount {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.bgcart {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(7, 17, 27, 0.6);
  z-index: -2;
}


.cList-enter-active,
.cList-leave-active {
  transition: all 0.4s;
}
.cList-enter,
.cList-leave-to {
  transform: translate3d(0, 100%, 0);
}
</style>